<template>
  <div id="app" ref="app">
    <transition mode="out-in"
      :name="transitionName"
      :enter-active-class="'slide-active'"
      :leave-active-class="'slide-active'">
      <keep-alive  :include="['mallCategory']">
        <router-view></router-view>
      </keep-alive>
    </transition>
  </div>
</template>

<script>
// import Footer from '@/components/footer.vue'
// import { mapActions, mapState } from 'vuex'
import { mapActions } from 'vuex'
export default {
  name: 'App',
  data() {
    return {
      transitionName: 'slide-left'
    }
  },
  components: {},
  computed: {
    // ...mapState(['cart'])
  },
  methods: {
    ...mapActions({ getAllCart: 'cart/get_all_cart' })
  },
  created() {
    // 获取当前购物车 详细数据
    this.$API.getCart()
    this.$API.loginState().then(res => {
      console.log(res)
      console.log(this.$store)
      if (res.login) {
        this.$store.dispatch('global/set_user_state', true)
        this.$store.dispatch('global/get_user_data', res.data)
      }
    })
    var wx = (function() {
      return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
    })()
    console.log(wx)
    let loadingBox = document.getElementById('loading')
    if (wx) {
      setTimeout(() => {
        if (loadingBox) document.body.removeChild(loadingBox)
      }, 4000)
    } else {
      if (loadingBox) document.body.removeChild(loadingBox)
    }
    this.$navigation.on('forward', () => {
      this.transitionName = 'slide-left'
    })
    this.$navigation.on('back', () => {
      this.transitionName = 'slide-right'
    })
  },
  mounted() {
    console.log(JSON.parse(localStorage.getItem('cart')))
    this.getAllCart()
    // window.onresize = () => {
    //   //键盘弹起与隐藏都会引起窗口的高度发生变化
    //   let resizeHeight = document.documentElement.clientHeight || document.body.clientHeight
    //   if (originalHeight - 0 > resizeHeight - 0) {
    //     this.appHeight = originalHeight + 'px'
    //   } else {
    //     this.appHeight = '100vh'
    //   }
    // }
  }
}
</script>

<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  height: 100%;
  overflow: hidden;
  color: #2c3e50;
}
.slide-active {
  transition: 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  transition-property: opacity, transform;
}
.slide-left-enter,
.slide-right-leave-to {
  opacity: 0;
  transform: translate3d(30%, 0, 0);
}
.slide-left-leave-to,
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-30%, 0, 0);
}
</style>
